<template>
  <div class="partDetele">
    <div class="title">
      <span>部分移除</span>
      <el-icon color="#02b980" :size="20" class="btn">
        <SuccessFilled @click="submit" />
      </el-icon>
    </div>
    <div class="content">
      <div class="header">
        <div>分配数</div>
        <div>移除数</div>
        <div>流向</div>
      </div>
      <div class="row">
        <div>{{ dataMsg.num }}</div>
        <div>
          <el-input-number
            v-model="deleteNum"
            :min="0"
            size="small"
            controls-position="right"
            style="width: 100%"
          />
        </div>
        <div :style="{ color: deleteNumRes < 0 ? 'red' : 'green' }">
          {{ deleteNumRes }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, getCurrentInstance, ref } from 'vue'

const vm = getCurrentInstance()
const { $http } = vm.appContext.config.globalProperties

const props = defineProps({
  dataMsg: {
    type: Object,
    default: () => {}
  }
})
const emit = defineEmits(['update'])

let deleteNum = ref(0)
let deleteNumRes = computed(() => {
  return props.dataMsg.num - deleteNum.value
})

const submit = () => {
  if (!deleteNum.value) {
    ElMessage.warning('请输入需要移除的数量')
    return
  }
  ElMessageBox.confirm('确定移除？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      console.log('删除行内项', props.dataMsg)
      const { code, message } = await $http.productionOrder.ganttRemove_gantt({
        id: props.dataMsg.id,
        removeNum: deleteNum.value //移除数
      })
      if (code !== 200) {
        ElMessage.error(message)
      } else {
        ElMessage.success('操作成功')
      }
      // 通知父组件刷新页面
      emit('update')
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped>
.partDetele {
  position: absolute;
  right: calc(-200px - 2px);
  top: 0px;
  width: 200px;
  border-radius: 2px;
  box-shadow: 0 0 8px #ccc;
  background-color: #fff;
  padding: 5px;
  box-sizing: border-box;
  .title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    .btn {
      cursor: pointer;
    }
  }
  .content {
    margin-top: 10px;
    width: 100%;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    .header,
    .row {
      width: 100%;
      display: flex;
      border-bottom: 1px solid #ccc;
      div {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #ccc;
      }
      div:nth-child(2) {
        flex: 2;
        padding: 2px;
        box-sizing: border-box;
      }
    }
  }
}
</style>
